<style>
    * {
        padding: 0;
        margin: 0;
    }


    .wrap {
        width: 600px;
        height: 900px;
        margin: 0 auto;
        background-color: yellow;
    }

    /* userInfo */
    .userInfo {
        width: 100%;
        height: 200px;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        background-color: pink;
    }

    .userInfo>div {
        height: 150px;
        border-radius: 10px;
        color: #fff;
    }

    .userInfo .name {
        width: 150px;
        line-height: 150px;
        font-size: 36px;
        font-weight: 600;
        text-align: center;


        background-color: skyblue;
    }

    .userInfo .other {
        width: 380px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        font-size: 20px;
        color: #333;
        padding-left: 20px;

        background-color: yellow;
    }

    /*  userMsg */
    .userMsg {
        width: 100%;
        margin-top: 20px;
        background-color: green;
    }

    .title {
        /* width: 94%; */
        /* height: 200px; */
        font-size: 28px;
        color: #333;
        line-height: 30px;
        margin-left: 16px;
    }

    .userMsg .content {
        width: 94%;
        /* height: 200px; */
        background-color: pink;
        margin: 0 auto;
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        font-size: 16px;
        line-height: 24px;
    }

    .userMsg .content>div {
        margin-top: 5px;
    }

    .userMsg .content>div:nth-child(1) {
        margin-top: 0;
    }

    .userMsg .content .zt {
        display: flex;
    }

    .userMsg .content input {
        width: 80px;
        height: 20px;
        /* padding-left: 10px; */
        border: 1px solid #333;
        /* background-color: red; */
        border-radius: 5px;
        text-align: center;
        margin-right: 10px;
    }

    .userMsg .content .w {
        color: red;
    }


    /* 凭证与跟进 */
    .messages {
        width: 94%;
        height: 300px;
        background-color: skyblue;
        margin: 0 auto;
        margin-top: 20px;
        overflow-y: scroll;
    }

    .swiper-contione {
        width: 100%;
        height: 150px;
        overflow: hidden;
        /* margin: 20px auto; */
        position: relative;
        background-color: red;
    }

    .swiper {
        width: 9999999px;
        height: 400px;
        transition: all 1s ease;
    }

    .swiper-item {
        width: 600px;
        height: 400px;
        float: left;
        position: relative;
    }

    .swiper-item>div {
        width: 100%;
        height: 100%;
        background-color: #fff;
    }

    .swiper-item>div .upload {
        width: 100px;
        height: 100px;
        margin-left: 232px;
        margin-top: 50px;
    }

    .swiper-item p {
        width: calc(100% - 30px);
        height: 40px;
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        /* text-align: center; */
        line-height: 40px;
        cursor: pointer;
        padding-left: 30px;
    }



    .swiper-left {
        width: 60px;
        height: 100%;
        position: absolute;
        top: 0;
        left: -60px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.4s ease;
    }

    .swiper-right {
        width: 60px;
        height: 100%;
        position: absolute;
        top: 0;
        right: -60px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.4s ease;
    }

    .swiper-left img,
    .swiper-right img {
        cursor: pointer;
        width: 40px;
        height: 50px;
    }

    .swiper-contione:hover .swiper-left {
        left: 0;
    }

    .swiper-contione:hover .swiper-right {
        right: 0;
    }

    /* 跟进信息 */
    .genjin {
        width: 100%;
        height: 100px;
        margin-top: 20px;
        background-color: #ccc;
    }

    .genjin>div:nth-child(1) {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    .genjin>div:nth-child(1) span {
        padding: 10px;
        background-color: #fff;
    }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.5.1.js"></script>

<div class="wrap">
    <!-- userInfo -->
    <div class="userInfo">
        <div class="name">申公豹</div>
        <div class="other">
            <div class="phone">联系电话：<span>15522667788</span></div>
            <div class="gender">性别：<span>男</span></div>
            <div class="zt">跟进状态：<span>已签约</span></div>
            <div class="lp">意向楼盘：<span>华宇东原</span></div>
        </div>
    </div>
    <!-- userMsg -->
    <div class="userMsg">
        <div class="title">基础信息</div>
        <div class="content">
            <div>报备人员：<span>楼管</span></div>
            <div>录入时间：<span>2021-08-21</span></div>
            <div>客户类别：<span>买房</span></div>
            <div>跟进时间：<span>2021-08-22</span></div>
            <div>客户标签：<span>♂</span><span>添加</span></div>
            <div class="zt">跟进状态：<input id="iptZt" value="跟进中" type="text" /></div>
            <div class="zt">订付金额：<input value="10" type="text" /><span class="w">万元</span></div>
            <div class="zt">订付金额：<input value="20" type="text" /><span class="w">万元</span></div>
            <div>失效备注：<span>失效备注是……</span></div>
            <!-- <div>跟进状态：<div class="ipt"></div></div> -->
        </div>
        <!-- <div class="btn">保存</div> -->
    </div>

    <!-- 凭证与跟进 -->
    <div class="messages">
        <div class="swiper-contione">
            <!-- 到访凭证 -->
            <div class="swiper">
                <div class="swiper-item">
                    <div>
                        <img class="upload" src="https://img.aishenghuolife.cn/小程序端/79253f77e6f7bd8773ce834f451e82030a893d3e.png" alt="">
                    </div>
                    <p>到访凭证</p>
                </div>
                <div class="swiper-item">
                    <div>
                        <img class="upload" src="https://img.aishenghuolife.cn/小程序端/79253f77e6f7bd8773ce834f451e82030a893d3e.png" alt="">
                    </div>
                    <p>订付凭证</p>
                </div>
                <div class="swiper-item">
                    <div>
                        <img class="upload" src="https://img.aishenghuolife.cn/小程序端/79253f77e6f7bd8773ce834f451e82030a893d3e.png" alt="">
                    </div>
                    <p>签约凭证</p>
                </div>
            </div>
            <div class="swiper-left">
                <img src="https://img.aishenghuolife.cn/小程序端/7ab7c1759f434605ae3cd35de7223985986c1fdf.png">
            </div>
            <div class="swiper-right">
                <img src="https://img.aishenghuolife.cn/小程序端/39e1bcd8ef78a3b2c2cc7fbbec224873232ac7e6.png">
            </div>
        </div>
        <!-- 跟进信息 -->
        <div class="genjin">
            <div>
                <div class="title">跟进信息</div>
                <span>添加跟进信息</span>
            </div>

        </div>
    </div>
</div>

<script type="text/javascript">
    // 轮播凭证
    class Swiper {
        constructor() {
            this.w = $('.swiper-item').width();
            this.num = 0;
            this.len = $('.swiper .swiper-item').length - 1;
            this.timer = null;
        }
        init() {
            //点击左右箭头
            this.lrClick();
        }

        lrClick() {
            $('.swiper-left img').click(() => {
                this.num--;
                if (this.num < 0) {
                    this.num = this.len;
                };
                console.log(this.num)
                let cssTrx = -this.num * this.w;
                $('.swiper-point-item .point').eq(this.num).addClass('active').siblings().removeClass(
                    'active');
                $('.swiper').css({
                    transform: `translateX(${cssTrx}px)`
                })
            });

            $('.swiper-right img').click(() => {
                this.num++;
                if (this.num > this.len) {
                    this.num = 0;
                }
                let cssTrx = -this.num * this.w;
                $('.swiper-point-item .point').eq(this.num).addClass('active').siblings().removeClass(
                    'active');
                $('.swiper').css({
                    transform: `translateX(${cssTrx}px)`
                })
            })
        }
    }
    let sw = new Swiper();
    sw.init();
</script>
